<template>
  <div class="full-height page-content content bg-white">
    <yz-condition-filter
      v-model="queryParams"
      @resetSearch="resetSearch"
      @onSubmit="onSubmit"
      class="padding-t-20"
    >
      <yz-input
        v-model.trim="queryParams.number"
        class="q-mr-md"
        :maxlength="20"
        title="清单编号"
      ></yz-input>
      <yz-input
        v-model.trim="queryParams.name"
        class="q-mr-md"
        :maxlength="20"
        title="清单名称"
      ></yz-input>
    </yz-condition-filter>
    <div class="form-inline bottom justify-between padding-b-20">
      <div class="left box">
        <q-btn class="btn margin-r-10"
               outline
               color="primary"
               @click="onEdit(null)">新增</q-btn>
      </div>
    </div>
    <q-table
      :data="tableData"
      :columns="tableColumns"
      row-key="id"
      class="myTable scroll stick-last-col"
      :loading="isTableLoading"
      :pagination.sync="pagination"
      :hide-bottom="tableData.length > 0"
      no-data-label="暂无数据"
      color="primary"
    >
      <template v-slot:body-cell-deviceCount="{ row }">
        <q-td>
          <span v-if="row.deviceCount === '--'" class="q-ml-md">{{row.deviceCount}}</span>
          <q-btn flat
                 v-else
                 color="primary"
                 :disable="row.deviceCount === 0"
                 class="qa-d-text"
                 @click="onCount(row)">{{row.deviceCount}}</q-btn>
        </q-td>
      </template>
      <template v-slot:body-cell-createTime="props">
        <q-td>
          {{ props.row.createTime | toTime }}
        </q-td>
      </template>
      <template v-slot:body-cell-operations="props">
        <q-td class="operations" style="width: 100px">
          <div class="btn-group text-center">
            <table-btn btnType="detail" @click="onDetail(props.row)"/>
            <table-btn btnType="edit" @click="onEdit(props.row)" />
            <table-btn btnType="delete" @click="onDelete(props.row.id)"  :tips="`是否确认删除此类清单吗?`"/>
          </div>
        </q-td>
      </template>
    </q-table>
    <yz-pagination v-model="pagination" @onSearch="getList"/>
    <device-dialog :show="isShowDeviceDialog" @close="isShowDeviceDialog = false; getList()" :detailId="detailId"/>
  </div>
</template>

<script>
import PAGEMIXIN from 'src/components/basic-mixins/page-mixin'
import { getDevicePartsList, devicePartsDeleteBatch } from 'src/boot/spare/parts'
import _ from 'lodash'
import DeviceDialog from './parts-list/device-dialog'
export default {
  name: 'parts-list',
  mixins: [PAGEMIXIN],
  props: {},
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: getDevicePartsList, // 数据列表接口，API地址
        deleteURL: devicePartsDeleteBatch, // 删除接口，API地址
        deleteIsBatchURL: '', // 删除接口，是否需要批量？
        deleteIsBatchKey: 'id', // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
        isSetData: false, // 获取的数据是否进去处理 func => setData
        isChangeData: true // 请求数据是否进去处理 func => changeData
      },
      queryParams: {
        createTimeAsc: false
      },
      detailId: '',
      newColumns: {
        number: '清单编号',
        name: '清单名称',
        deviceCount: '设备数量',
        remark: '备注',
        createName: '创建人',
        createTime: '创建时间',
        operations: '操作'
      },
      // sparePartOptions: [],
      // toolTypeSOptions: [],
      // toolUnitOptions: [],
      isEdit: false,
      isShowDeviceDialog: false,
      tableData: []
    }
  },
  components: {
    DeviceDialog
  },
  beforeRouteEnter (to, from, next) {
    to.name === 'partsList' && next(vm => {
      vm.getList()
    })
  },
  computed: {
    statusOptions () {
      return this.$getEnum(this.Enums.CUTTER_TYPE_STATUS)
    },

    lifeModeOptions () {
      return this.$getEnum(this.Enums.MODE_LIFE_TYPE)
    }
  },
  methods: {
    changeData (val) {
      return {
        ...val
      }
    },
    onEdit (row) {
      const url = _.isNil(row) ? 'add' : 'edit'
      this.$router.push({
        path: `/main/repair/parts-list/${url}`,
        query: !_.isNil(row) ? {
          id: row.id
        } : {}
      })
    },
    onDetail (row) {
      this.$router.push({
        path: `/main/repair/parts-list/detail`,
        query: {
          id: row?.id
        }
      })
    },
    // getMapByGroup () {
    //   getMapByGroup().then(res => {
    //     this.sparePartOptions = res.sparePartOptions || []
    //     this.toolUnitOptions = res.spareUnitOptions || []
    //     this.toolTypeSOptions = res.toolTypeSOptions || []
    //   })
    // },
    onCount (row) {
      this.isShowDeviceDialog = true
      this.detailId = row.id
    }
  },
  mounted () {
    // this.getMapByGroup()
    this.onSubmit()
  }
}
</script>
<style lang="scss" scoped>
.fix-detail {
  >>> .form-inline .q-field__inner {
    width: 200px;
  }
}
.color-b {
  color: #5f77fd;
  cursor: pointer;
}
</style>
